<template>
  <view class="viewport">
    <!-- #ifndef MP-TOUTIAO -->
    <!-- 自定义导航栏 -->
    <uni-nav-bar class="uni-nav-bar" background-color="rgba(255,255,255,0)" :border="false" :statusBar="true"
      @clickLeft="goBack">
      <template #left>
        <view class="icon-arrow-left"></view>
      </template>
      <template #default>
        <view class="title">{{ baseTypeName }}速记卡片</view>
      </template>
    </uni-nav-bar>
    <!-- #endif -->
    <!-- 抖音小程序顶部导航 -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="toutiao-nav-bar">
      <view class="status-bar"></view>
      <view class="title-container">
        <view class="title">速记卡片</view>
      </view>
    </view>
    <!-- #endif -->
    <!-- 考点详情详-选项卡 -->
    <view class="uv-tabs-container">
      <uv-tabs class="uv-tabs" :list="knowSummaryClasses" :current="activeKnowSummaryIndex" lineWidth="0" :activeStyle="{
        padding: '12rpx 48rpx',
        color: '#ffffff',
        fontSize: '28rpx',
        backgroundColor: '#fd6927',
        borderRadius: '8rpx',
        transform: 'scale(1)'
      }" :inactiveStyle="{
        padding: '12rpx 42rpx',
        fontSize: '28rpx',
        color: '#12110f',
        backgroundColor: '#fff',
        borderRadius: '8rpx',
        transform: 'scale(1)'
      }" itemStyle="padding-left: 5px; padding-right: 10px; height: 50px;" @change="tabsChange"></uv-tabs>
    </view>
    <swiper :current="activeKnowSummaryIndex" @change="swiperChange">
      <swiper-item v-for="(knowSummaryClasseItem, knowSummaryClasseIndex) in knowSummaryClasses"
        :key="knowSummaryClasseIndex">
        <scroll-view class="scroll-view" scroll-y>
          <view class="shorthand-details">
            <view class="shorthand-details-title">{{ knowSummaryClasseItem.name }}{{
              getKnowSummaries(knowSummaryClasseItem.id!)?.length }}大考点</view>
            <view class="shorthand-details-card">
              <view class="shorthand-card" v-for="(item, index) in getKnowSummaries(knowSummaryClasseItem.id!)"
                :key="index">
                <view class="shorthand-card-title">
                  <image class="shorthand-card-title-left-img"
                    src="@/pagesExercise/static/image/shorthand_card_details/title.png" mode="widthFix" />
                  <text>{{ item.name }}</text>
                  <image class="shorthand-card-title-right-img"
                    src="@/pagesExercise/static/image/shorthand_card_details/title.png" mode="widthFix" />
                </view>
                <view class="shorthand-card-inner">
                  <view class="shorthand-card-inner-h5" v-if="item.mediaType == 1">
                    <uv-parse :content="item.mediaContent" :tagStyle="knowSummaryDetailsImgTagStyle"
                      :show-img-menu="false"></uv-parse>
                  </view>
                  <view class="shorthand-card-imgs" v-else>
                    <image class="shorthand-card-img" :src="imgItem" mode="widthFix"
                      v-for="(imgItem, imgIndex) in item.mediaContent!.split(',')" />
                  </view>
                </view>
                <view class="shorthand-card-bottom">
                  <view class="shorthand-card-btn" @tap="toExercise(item.id!)">去练题({{ item.questionIds?.length }}题)
                  </view>
                </view>
                <!-- 联合Panel -->
                <view class="shorthand-card-link"
                  v-if="index < getKnowSummaries(knowSummaryClasseItem.id!)!.length - 1">
                  <image class="link-img" src="@/pagesExercise/static/image/shorthand_card_details/link.png"
                    mode="widthFix" />
                  <image class="link-img" src="@/pagesExercise/static/image/shorthand_card_details/link.png"
                    mode="widthFix" />
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>

  </view>

</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import type { KnowSummaryClasses } from '@/api/base/types'
  import { ExerciseTypeEnum } from '@/api/constants'
  import { useBaseInfo, useBaseTypeName } from '@/composables/LearnBase'

  // #ifdef MP
  // 获取小程序下胶囊按钮的布局位置信息
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // 上边界坐标，单位：px
  let top = (menuButtonInfo.top - 10) + 'px'
  const statusBarHeight = ref(top)
  // 高度，单位：px
  let height = (menuButtonInfo.height + 20) + 'px'
  const titleHeight = ref(height)
  // #endif
  //退出

  // 题库信息
  const baseInfo = useBaseInfo()
  // 考点总结
  const knowSummaryClasses = ref<KnowSummaryClasses[]>([])
  // 当前考点总结的索引
  const activeKnowSummaryIndex = ref<number>(0)
  // 题库类型
  const baseType = ref<string>()

  const baseTypeName = computed(() => useBaseTypeName(baseType.value!))
  onLoad((options: any) => {
    baseType.value = options.baseType
    activeKnowSummaryIndex.value = options.shorthandCardIndex
    knowSummaryClasses.value = baseInfo.knowSummaryClasses!.filter(item => item.baseType == baseType.value)
  })


  // tabs通知swiper切换
  const tabsChange = (item: any) => {
    activeKnowSummaryIndex.value = item.index
  }
  // swiperChange
  const swiperChange = (e: UniHelper.SwiperOnChangeEvent) => {
    activeKnowSummaryIndex.value = e.detail.current
  }

  /**
   * 获取考点总结
   * @param knowSummaryClassesId
   */
  const getKnowSummaries = (knowSummaryClassesId: number) => {
    return baseInfo.knowSummaries?.filter(item => item.classesId == knowSummaryClassesId)
  }


  // 去练习
  const toExercise = (knowSummaryId: number) => {
    uni.navigateTo({
      url: `/pagesExercise/answer/answer?exerciseType=${ExerciseTypeEnum.KnowSummaryQuestionExercise}&baseType=${baseType.value}&knowSummaryId=${knowSummaryId}`
    })
  }
  // 考点总结内容富文本图片样式
  const knowSummaryDetailsImgTagStyle = ref({
    img: 'width: 100%;height:auto'
  })
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-image: linear-gradient(180deg,
        #efdebb 0%,
        #fff 25%);
  }

  .uni-nav-bar {
    .icon-arrow-left {
      font-weight: bold;
    }

    .title {
      align-self: center;
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  /* #ifdef MP-TOUTIAO */
  // 抖音自定义导航栏
  .toutiao-nav-bar {

    // 顶部占位
    .status-bar {
      width: 100vw;
      height: v-bind(statusBarHeight);
    }

    // 标题行
    .title-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      // justify-content: center;
      height: v-bind(titleHeight);

      .title {
        margin-left: 82rpx;
        font-size: 32rpx;
        // font-weight: bold;
      }
    }
  }

  /* #endif */

  .uv-tabs-container {
    padding-left: 30rpx;
  }

  .scroll-view {
    display: flex;
    flex-direction: column;
    padding: 30rpx 30rpx;
  }

  .shorthand-details {
    display: flex;
    flex-direction: column;

    .shorthand-details-title {
      margin-bottom: 65rpx;
      font-size: 36rpx;
      color: #491d11;
      font-weight: bold;
    }

    .shorthand-details-card {
      .shorthand-card {
        margin-top: -35rpx;
        padding: 50rpx 16rpx 68rpx;
        background-image: linear-gradient(135deg,
            #eedcb6 0%,
            #f4ebd5 0%,
            #faf9f4 0%,
            #faf8f5 0%,
            #faf6f5 0%,
            #fbf5ef 0%,
            #fbf3e8 0%,
            #fbf5ee 0%,
            #faf6f3 0%,
            #fbf4ee 0%,
            #fcf2e8 0%,
            #f2d1b2 100%);
        box-shadow: -4rpx -4rpx 7rpx 0rpx rgba(198, 96, 0, 0.1),
          4rpx 4rpx 7rpx 0rpx rgba(198, 96, 0, 0.1);
        border-radius: 20rpx;

        .shorthand-card-title {
          margin-bottom: 40rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 34rpx;
          color: #39281e;
          font-weight: bold;

          .shorthand-card-title-left-img {
            width: 58rpx;
            margin-right: 20rpx;
          }

          .shorthand-card-title-right-img {
            width: 58rpx;
            margin-left: 20rpx;
            transform: rotate(180deg);
          }
        }

        .shorthand-card-inner {
          border-radius: 16rpx 16rpx 0 0;

          .shorthand-card-inner-h5 {
            padding: 40rpx 20rpx;
            background-color: #ffffff;
          }

          .shorthand-card-imgs {
            .shorthand-card-img {
              margin-bottom: 20rpx;
              width: 100%;
            }
          }
        }

        .shorthand-card-bottom {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 136rpx;
          background-color: #fdf5ea;
          border-radius: 1rpx 0rpx 16rpx 16rpx;

          .shorthand-card-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 408rpx;
            height: 87rpx;
            font-size: 32rpx;
            color: #722805;
            background-image: linear-gradient(180deg,
                #f7e4d6 0%,
                #f3e0c6 0%,
                #eedcb6 0%,
                #f4e9d6 0%,
                #faf6f5 0%,
                #fcfbf9 0%,
                #fdfffc 0%,
                #f8efe4 0%,
                #f2dfcc 0%,
                #f8efe4 0%,
                #fdfffc 0%,
                #fcfcf0 100%),
              linear-gradient(#f7e4d6,
                #f7e4d6);
            background-blend-mode: normal,
              normal;
            border-radius: 44rpx;
            border: solid 3rpx #fcc494;

          }
        }
      }

      .shorthand-card-link {
        display: flex;
        justify-content: space-between;
        margin-top: -40rpx;
        padding: 0 50rpx;
        z-index: 2;

        .link-img {
          width: 24rpx;
        }
      }
    }


  }
</style>
